<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documents - DreamLife</title>
    <link rel="icon" type="image/x-icon" href="{% static 'img/icon.ico' %}">
    <style>
        /* CSS样式可以根据需要自行添加 */
        /* 页面居中显示 */
        body {
            background-image: url("{% static 'img/myimg.jpg' %}");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 保持背景图固定不随滚动而移动 */
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        /* 取消超链接的下划线并将初始字体颜色设置为黑色 */
        a {
            text-decoration: none;
            color: black;
            /* 其他样式 */
        }

        /* 点击后保持字体颜色为黑色 */
        a:visited {
            color: black; /* 设置点击后的字体颜色为黑色 */
        }

        button {
            border: none;
            background: none;
            padding: 4px 4px;
            margin: 4px;
            border-radius: 20px;
            height: auto; /* 允许高度根据内容自动调整 */
            display: inline-block; /* 使按钮以块级元素显示 */
        }


        /* 将按钮样式应用于超链接 */
        button a {
            text-decoration: none;
            color: black;
            display: block; /* 将超链接显示为块级元素 */
            border-radius: 20px;
            line-height: 20px; /* 控制文本行之间的间距 */
            background-color: #f2f2f2; /* 浅灰色背景 */
            width: 6em; /* 宽度为4个字符 */
            text-align: center;
            margin: 10px 10px 10px 10px;
            transition: background-color 0.3s ease; /* 渐变效果 */
        }

        /* 鼠标悬停时按钮颜色变深 */
        button a:hover {
            background-color: #ccc; /* 深灰色背景 */
        }


        /* 整体容器 */
        .super {
            {#简单实现一个居中盒子#}
            {#width: 200px;#}
            {#height: 200px;#}
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            width: 60%; /* 调整宽度 */
            background-color: rgba(255, 255, 255, 0.6); /* 设置背景色并调整透明度 */
            align-items: center;
            backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center; /* 居中文本 */
            {#height: 80vh; /* Adjust this value as needed */#}
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


    </style>
</head>
<body>
    <div class="super">
        <div class="container">
            <h1>文档</h1>
            <button><a href="https://gitee.com/laozibabac">文档</a></button>
        </div>
    </div>
</body>
</html>
